<template>
  <div class="content-wrapper">

    <div class="device-detail">
      <i-cell title-class="cell-title" @click='toDevice(device.ID)'
        :title="device.DeviceName">
        <i-icon class='online-icon' size="40" type="emoji" slot="icon" 
        :style="device.Online ? 'color:#33DEB4;' : 'color:#999;'"/>
        <div class="device-content" style="display: block;">
          <span class='product-info' style="width: 240rpx;">
            <p class='info-tag' style="width: 120rpx;">用户ID：</p>
            <p class='info-content'>{{ device.UserId }}</p>
          </span>
          <span class='product-info' style="width: 240rpx">
            <p class='info-tag' style="width: 120rpx;">设备ID：</p>
            <p class='info-content' style="color: #999;">{{ device.ID }}</p>
          </span>
          <span class='product-info' style="width: 240rpx">
            <p class='info-tag' style="width: 120rpx;">产品ID：</p>
            <p class='info-content' style="color: #999;">{{ device.ProductId }}</p>
          </span>
          <span class='product-info' style="width: 240rpx">
            <p class='info-tag'>接入协议：</p>
            <p class='info-content' style="color: #999;">{{ protocol }}</p>
          </span>
          <span class='product-info' style="width: 440rpx;">
            <p class='info-tag'>创建时间：</p>
            <p class='info-content' style="color: #999;">{{ device.CreatedAt }}</p>
          </span>
          <span class='product-info' style="width: 560rpx;">
            <p class='info-tag'>API KEY：</p>
            <p class='info-content' style="color: #999;">{{ device.DeviceKey }}</p>
          </span>
        </div>
      </i-cell>
    </div>
    
    <div class="map-wrapper">
      <map class="map" id="map" :longitude="longitude" :latitude="latitude" 
        scale="14" show-location="false" :markers="markers" />
    </div>

    <i-spin size="large" fix v-if="spinShow"></i-spin>

  </div>
</template>

<script>

import store from '../store/store'
import { request } from '@/utils/index'
import { transCategory, transProtocol } from '@/utils/dict'

const { $Message } = require('../../../static/dist/base/index')

var amapFile = require('../../../static/js/amap-wx.js')
var Amap = new amapFile.AMapWX({key: '1fd54c444c41e57b8e5556c1ddcafaf8'})

export default {
  data () {
    return {
      deviceID: 1,
      productID: 1,
      device: [],
      product: [],
      mapCtx: null,
      markers: [],
      longitude: 121.5273285,
      latitude: 31.21515044
    }
  },
  onLoad (options) {
    // this.deviceID = options.deviceID
    // this.productID = options.productID
    this.fetchDevice()
    this.fetchProduct()
  },
  methods: {
    fetchDevice () {
      var target = `/api/v1/device/detail?id=${this.deviceID}`
      request(target, { token: this.token }, 'GET').then((ids) => {
        if (ids.code !== 200) {
          $Message({ content: ids.message, type: 'error' })
          return false
        }
        this.device = ids.data
        this.device.Location ? this.parseloc(this.device.Location) : this.$Message.error('未选中设备位置')
      }, (e) => {
        $Message({ content: '请求错误，请重试', type: 'error' })
        return false
      })
    },
    fetchProduct () {
      var target = `/api/v1/product/detail?id=${this.productID}`
      request(target, { token: this.token }, 'GET').then((ids) => {
        if (ids.code !== 200) {
          $Message({ content: ids.message, type: 'error' })
          return false
        }
        this.product = ids.data
      }, (e) => {
        $Message({ content: '请求错误，请重试', type: 'error' })
        return false
      })
    },
    parseloc (location) {
      let that = this
      let lng = location.split(',')[0]
      let lat = location.split(',')[1]

      Amap.getRegeo({
        location: location,
        success: function (res) {
          that.latitude = lat
          that.longitude = lng
          that.markers = [{
            latitude: that.latitude,
            longitude: that.longitude,
            name: '设备地址：' + res[0].regeocodeData.formatted_address
          }]
          $Message({ content: '设备地址：' + res[0].regeocodeData.formatted_address })
        },
        fail: function (info) {
          $Message({ content: '设备地址解析错误', type: 'error' })
        }
      })
    },
    handleChange (detail) {
      this.current = detail.target.key
    }
  },
  computed: {
    token () {
      return 'Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1MzUzNzA0MTAsImlkIjoyMCwib3JpZ19pYXQiOjE1MzUzNjY4MTB9.XEkWK1i3gTgY72VC7eh-dcLkg-2MAVtlNvM_c0Vl4rFwsVgqxM0iBmShTwke-hGuLtUFmxGMbA1L7d_0CTUDjQs0vx9ByX_r8G_mAU3mQrcovSdjf7nUT30pPSi2_ehSM4ruc_VUWke9XPE86osk6RAZgYfOuEY5PHn0LI6cKeo'
      // return store.state.token
    },
    protocol () {
      return transProtocol(this.product.Protocol)
    }
  }
}
</script>

<style>
.map-wrapper {
  height: 80%;
  padding: 20rpx;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  background-color: #FFF;
}
.map {
  width: 100%;
  height: 100%;
}
.content-wrapper {
  height: 100%;
  padding-top: 30rpx;
}
.cell-title {
  display: inline-block;
  color: #1EB4C5;
}
.product-info {
  width: 300rpx;
  color: #999;
  margin-top: 20rpx;
  display: inline-block;
}
.product-info p {
  display: inline-block;
}
.product-info .info-tag {
  width: 150rpx;
}
.product-info:nth-child(n+2) .info-content {
  color: #1EB4C5;
}
.online-icon {
  margin-right: 20rpx;
}
</style>